import React, { Component } from 'react';
import axios from 'axios'
import PubSub from 'pubsub-js'
import { Layout, Menu, Typography, Alert } from 'antd';
import { Route, Switch, Redirect, Link} from 'react-router-dom';
import {
  DesktopOutlined,
  PlayCircleOutlined,
  SearchOutlined
} from '@ant-design/icons';
import home from "./index.module.css"
import Zhuti from '../../pages/home_lunbo'
import Fenleione from '../../pages/home_fenlei'
import Typewwo from '../../pages/type_tow'
import Xiangqing from '../../pages/home_xiangqing'
import Sousuo from '../../pages/home_sousuo'
const { Header, Content, Footer, Sider } = Layout;
const { Title } = Typography;
const { SubMenu } = Menu;

class index extends Component {
  constructor(props) {
    super(props)

    const path = window.location.pathname
    if (path.indexOf("lunbo") != -1) {
      this.state = {
        display: "none",
        key: 1,
      }
    } else if (path.indexOf("fenlei") != -1) {
      this.state = {
        display: "none",
        key: 2,
      }
    } else if (path.indexOf("xiangqing") != -1) {
      this.state = {
        display: "none",
        key: 3
      }
    }else if(path.indexOf("sousuo") != -1){
      this.state={
        display: "none",
        key: 4
      }
    }

  }
  state = {
    type: "success",
    name: "操作成功",
    display: "none",
    collapsed: false,
    key: null
  }
  componentDidMount() {
    const path = window.location.pathname
    if (path.indexOf("lunbo") != -1) {
      this.setState({
        key: 1
      })
    }  if (path.indexOf("fenlei") != -1) {
      this.setState({
        key: 2
      })
    } else if (path.indexOf("xiangqing") != -1) {
      this.setState({
        key: 3
      })
    }else if(path.indexOf("sousuo") != -1){
      this.setState({
        key: 4
      })
    }
    // console.log(key);
    axios.get("http://localhost:3001/api/token",
      {
        params: {
          token: localStorage.getItem("token")
        }
      }
    ).then((req, res) => {
      if (!(req.data.code)) {
        alert("token失效，请重新登录")
        this.props.history.replace(`/user/`)
      }
    })

  }
  alert = (() => {
    PubSub.subscribe('arguigu', ((msg, data) => {
      const { type, name, display } = data
      this.setState({
        type, name, display
      })
    }))
  })()
  render() {
    const { type, name, display, key } = this.state
    return (
      <div>
        <Layout style={{ minHeight: '100vh' }}>
          <Sider onCollapse={this.onCollapse}>
            <div className="logo" />
            {/* <div style={{height:"60px"}}>123</div> */}
            <Title level={2} id={home.header}>商城管理系统</Title>
            <Menu theme="dark" defaultSelectedKeys={[`${key}`]} mode="inline">
              <Menu.Item key="1" icon={<PlayCircleOutlined />}>
                <Link to="/home/lunbo">
                  轮播图管理
                </Link>
              </Menu.Item>
              <Menu.Item key="2" icon={<DesktopOutlined />}>
                <Link to="/home/fenlei">
                  商品分类管理
                </Link>
              </Menu.Item>
              <Menu.Item key="3" icon={<DesktopOutlined />}>
                <Link to="/home/xiangqing">
                  商品详情管理
                </Link>
              </Menu.Item>
              <Menu.Item key="4" icon={<SearchOutlined />}>
                <Link to="/home/sousuo">
                  商品搜索
                </Link>
              </Menu.Item>
            </Menu>
          </Sider>
          <Alert message={name} style={{ position: "fixed", top: "20px", left: "50%", transform: "translate(-50%,0)", zIndex: "9999", display: display }} banner={true} type={type} />

          <Switch>
            <Route exact path="/home/fenlei/typetwo" component={Typewwo} />
            <Route exact path="/home/lunbo" component={Zhuti} />
            <Route exact path="/home/fenlei" component={Fenleione} />
            <Route exact path="/home/xiangqing" component={Xiangqing} />
            <Route exact path="/home/sousuo" component={Sousuo} />
            <Redirect to="/home/lunbo" />
          </Switch>
        </Layout>
      </div>
    );
  }
}

export default index;